<template>
  <div class="addAccount">
    <van-form
      @submit="onSubmit"
      input-align="right"
      error-message-align="right"
    >
      <van-cell-group inset>
        <van-field
          v-model="ruleForm.name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="ruleForm.phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          maxlength="18"
          clearable
          :rules="[{ required: true, message: '请填写手机号' }]"
        />

        <van-field
          v-model="ruleForm.idNo"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
          maxlength="18"
          clearable
          :rules="[{ required: true, message: '请填写身份证号码' }]"
        />
        <van-field
          v-model="ruleForm.amount"
          name="划转数量"
          label="划转数量"
          placeholder="请输入划转数量"
          type="number"
          :rules="[{ required: true, message: '请填写划转数量' }]"
        />
      <van-field v-model="ruleForm.code" 
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码">
    
        <template #button>
          <van-button size="small" type="primary" class="login-form__code" @click="getCodeHandler" :disabled="ruleForm.codeLoading">
            {{ ruleForm.time == 60 ? '发送验证码' : ruleForm.time + 'S重新获取' }}
          </van-button>
        </template>
      </van-field>
      </van-cell-group>
      <div class="footer media">
        <div class="footer-btn text-center text-32" @click="onSubmit">
          申请划转
        </div>
        <p
          class="footer-btn__line text-center text-32"
          @click="goUrl('/transfer-list')"
        >
          申请划转记录
        </p>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { isMobile } from '@/utils/index'
import { ref, onBeforeMount } from "vue";
import { transfer,appCode } from "@/config/api";
import { showToast, showConfirmDialog } from "vant";
import router from "@/config/router";

const ruleForm = ref({
  name: "",
  phone: "",
  idNo: "",
  amount: "",
  codeLoading: false,
  time:'60',
  timer: null,
});
const goUrl = (url) => {
  router.push(url)
}
// 验证码
const getCodeHandler = function() {
  clearInterval(ruleForm.value.timer)
  ruleForm.value.codeLoading = true
  appCode({})
    .then(() => {
      ruleForm.value.timer = setInterval(() => {
        ruleForm.value.time--
        if (ruleForm.value.time <= 0) {
          clearInterval(ruleForm.value.timer)
          ruleForm.value.time = 60
          ruleForm.value.codeLoading = false
        }
      }, 1000)
    })
    .catch(() => {
      ruleForm.value.codeLoading = false
    })
}
// 确定事件
const onSubmit = () => {
  showConfirmDialog({
    title: "划转",
    message: "确定发起划转吗？",
  })
    .then(() => {
      //   showLoadingToast({
      //   message: '加载中...',
      //   forbidClick: true,
      // });
      transfer(ruleForm.value).then(() => {
        showToast("划转成功");
        setTimeout(() => {
          router.go(-1);
        }, 1000);
      });
    })
    .catch(() => {
      // on cancel
    });
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  height: 3.68rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  .footer-btn {
    width: 8.4rem;
    height: 1.2rem;
    line-height: 1.2rem;
    background: var(--color-primary);
    border-radius: 0.27rem;
    margin: 0.67rem auto 0.53rem;
    color: white;
  }
  .footer-btn__line {
    color: var(--color-primary);
  }
}
/deep/ .van-field__label {
  color: #666666;
}
/deep/ .van-cell {
  padding: 0.35rem 0.53rem;
}
.addAccount {
  min-height: 100vh;
  background: #f0f3f8;
  padding-top: 0.53rem;
}

.payQrcode_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.27rem;
}

.payQrcode_box img {
  width: 4rem;
}
.fixed-btn {
  width: 100%;
  min-height: 2.67rem;
  background: #ffffff;
  box-shadow: 0px 0px 0.21rem 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 0.27rem;
  margin: 0 auto;
  .van-button {
    width: 100%;
  }
}
</style>